<style scoped>
.icon{width: 1em;}
.info{width: 100%;font-size: .7em;line-height: 1.2;padding-top: .4em;opacity: .8;background: var(--van-cell-background);}
</style>
<template>
  <div class="row-cell">
    <van-cell :title="stringData.title" :value="stringData.value" :is-link="!!stringData.link_href" @click="click">
      <template #icon v-if="icon">
        <icon-img class="icon" :value="icon"></icon-img>
      </template>
      <template #extra>
        <p class="info">{{info}}</p>
      </template>
    </van-cell>
  </div>
</template>

<script>

import {to_string} from "@/js/s94_tool.js";
import IconImg from "@/components/widget/IconImg.vue";
import {href_handle} from "@/vue_plugin/router_auto.js";

/**
 * @prop {*}
 */
export default {
  _title_: '单元格',
  _tip_: '左右两端显示的键值对',
  _css_var_: {
    ...IconImg,
  },
  _head_img_: '',
  _group_: '单元组件',
  components: {IconImg},
  props:{
    title: {
      type: [String,Number],
      _label_: '标题',
      _tip_: '左侧深色字体显示的标题',
      _default_: "get($info,'title')",
    },
    value: {
      type: [String,Number],
      _label_: '值',
      _tip_: '右侧浅色字体显示的值',
      _default_: "get($info,'value')",
    },
    icon: {
      type: String,
      _label_: '图标',
      _tip_: '在标题左侧显示的图标',
      _default_: "get($info,'head_img')",
    },
    link_href: {
      type: String,
      _label_: '链接地址',
      _tip_: '点击后跳转的链接地址，设定后右侧会显示箭头作为链接的标志，如果为空，点击后不跳转',
    },
    info: {
      type: [String,Number],
      _label_: '简介',
      _tip_: '在标题和值下面使用小号浅色字体显示的简介',
    },
  },
  data(){
    return {}
  },
  methods:{
    click(){
      if (!this.stringData.link_href) return;
      href_handle(this.stringData.link_href);
    }
  },
  computed:{
    stringData(){
      return{
        title: to_string(this.title),
        value: to_string(this.value),
        link_href: to_string(this.link_href),
        info: to_string(this.info),
      }
    }
  },
  mounted(){
  }
}
</script>